<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in columnList" :key="item.id">
      <div class="content-item">
        <img :src="item.avatar" alt="头像加载中..." />
        <h5>{{ item.title }}</h5>
        <p>{{ item.description }}</p>
        <a href="#">进入专栏</a>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
export interface ColumnProps {
  id: number,
  title: string,
  avatar?: string,
  description: string
}
export default defineComponent({
  name: 'ColumList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true
    }
  },
  setup (props) {
    // 对传入的参数进行修改
    const columnList = computed(() => {
      return props.list.map(item => {
        if (!item.avatar) {
          item.avatar = require('@/assets/logo.png')
        }
        return item
      })
    })
    return {
      columnList
    }
  }
})
</script>

<style scoped lang="scss">
.el-col {
  margin-bottom: 20px;
  .content-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: beige;
    border: 2px solid #000;
    padding: 10px 30px;
    border-radius: 10px;
    overflow: hidden;
  }
  img {
    width: 100px;
    height: 100px;
  }
}
</style>
